<template>
	<view>
		<view class="feedback-title">
			意见反馈 <text class="feedback-title-num">({{content.length}}/200)</text>
		</view>
		<view class="feedback-content">
			<textarea class="feedback-textarea" v-model="content" maxlength="200" placeholder="请输入您要反馈的问题" />
		</view>
		<view class="feedback-title">
			反馈图片 <text class="feedback-title-num">({{imageList.length}}/6)</text>
		</view>
		<view class="feedback-image-box">

			<view class="feedback-image-item" v-for="(item, index) in imageList" :key="index">
				<view class="close-icon" @click="del(index)">
					<uni-icons type="closeempty" size="18" color="#fff"></uni-icons>
				</view>
				<view class="image-box">
					<image :src="item.url" mode="aspectFill"></image>
				</view>
			</view>

			<view v-if="imageList.length < 5" class="feedback-image-item" @click="addImage">
				<view class="image-box">
					<uni-icons type="plusempty" size="50" color="#eee"></uni-icons>
				</view>
			</view>

		</view>

		<button class="feedback-button" type="primary" @click="submit">提交反馈意见</button>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				hashList: [],
				imageList: [],
				content: ''
			}
		},
		computed: {
			...mapState(['userinfo']),
		},
		onShow() {
			// 微信分享
			this.shareWx('', '用户反馈')
		},
		methods: {
			// 上传
			submit() {

				if (!this.content) {
					uni.showToast({
						title: '请输入内容',
						icon: 'none'
					})
					return
				}
				
				this.$api.feedback({
					content: this.content,
					images: this.hashList,
					userid: this.userinfo.id
				}).then(res => {
					console.log(res)
					if (res.ret == 1) {
						uni.showToast({
							title: '谢谢你的反馈',
							icon: 'none',
							success() {
								setTimeout(function() {
									uni.switchTab({
										url: '/pages/tabbar/my/my'
									});
								}, 1000)

							}
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},

			// 删除图片
			del(index) {
				this.imageList.splice(index, 1)
				this.hashList.splice(index, 1)
			},
			// 添加图片
			addImage(){
			    let _this = this
				const count = 6 - this.imageList.length
			
				uni.chooseImage({
					count: 6, //最多运行上传几张图片
					success(res) {
						
			            _this.$api.get_token_from_qiniu({}).then(result => {
					
			                if (result.ret == 1) {
			                    var token = result.data.token;
			
			                    uni.showLoading({
									title: '上传中'
								})
			
								const {
									tempFilePaths
								} = res
			                    
								tempFilePaths.forEach((item, index) => {
									// 处理 h5 多选的状况
									if (index < count) {
										// _this.imageList.push({
										// 	url: item
										// })
									}
			
									uni.uploadFile({
										url: 'https://up-z1.qiniup.com/',
										filePath: item,
										name: 'file',
										formData: {
											'token': token
										},
										success: (uploadFileRes) => {
											let json = JSON.parse(uploadFileRes.data);
											// 上传到服务器fa_file中
											_this.$api.upload_qiniu({
												'hash': json.hash
											});
			
											_this.imageList.push({
												url: 'http://static.dadi30.com/' +
													json.hash + '-sl200'
											})
											_this.hashList.push(
												'http://static.dadi30.com/' + json.hash
												)
			
											
			
										}
									});
								})
								// console.log(_this.imageList)
								
								setTimeout(function() {
									uni.hideLoading()
								}, 3000);
			                }
			
			            })
						
					}
				})		
			}
		}
	}
</script>

<style lang="scss">
	.feedback-title {
		margin: 15px;
		margin-bottom: 0;
		font-size: 14px;
		color: #666;
	}
	
	.feedback-title-num{
		font-size: 12px;
		margin-left: 6px;
	}

	.feedback-content {
		margin: 15px;
		padding: 10px;
		box-sizing: border-box;
		border: 1px solid #eee;

		.feedback-textarea {
			font-size: 12px;
			width: 100%;
			height: 100px;
		}
	}

	.feedback-image-box {
		display: flex;
		flex-wrap: wrap;
		padding: 10px;

		.feedback-image-item {
			position: relative;
			width: 33.33%;
			height: 0;
			padding-top: 33.33%;
			box-sizing: border-box;

			.image-box {
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				top: 5px;
				left: 5px;
				right: 5px;
				bottom: 5px;
				border: 1px solid #eee;
				border-radius: 5px;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.close-icon {
				position: absolute;
				right: 0;
				top: 0;
				width: 22px;
				height: 22px;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #ff5a5f;
				z-index: 2;
			}
		}
	}

	.feedback-button {
		margin: 0 15px;
		background-color: $mk-base-color;
	}
</style>
